<template>
  <div class="wrapper">
    <div class="apply_list">
      <mt-field  placeholder="请输入活动地点(必填)" v-model="value"></mt-field>
      <div class="pad_b">展区总图</div>
      <div class="headline"><img  v-bind:src="vray[0].PicUrl"  alt="" ref="preview"> </div>
      <div class="content">
        <ul class="list">               
          <li v-for="(item,index) in vray" class="users_portrait" v-bind:class="{active:index == id}"
          
            v-bind:data-SiteID="item.SiteID" @click="toCheck(index,item.SiteID)">
            
         
            <img  v-bind:src="item.PicUrl"   alt="" @click="pitchOn($event)">
          </li>
    
        </ul>            
      </div>
    </div>
    <mt-button type="default" size="large" @click="submit">提交</mt-button>
  </div>
</template>
<script >

import { Toast } from 'mint-ui'
import { GetSiteString } from 'src/servise/getData'; //展位地址
export default {

  created(){
   this.sentData=JSON.parse(sessionStorage.PublishInit);

  this.$http.get('http://activityld.ccnf.com//api/Activitiy/GetSiteString?'+'exibitorID=000001').then(
    (res)=>{
      console.log(res.data.Result)
      this.vray=res.data.Result;
      
      }
     
  )

  },
  data() {
    return {
      index: 0,
      lists: [1,2],
      id: 0,
      value: '',
      sentData:'',
      vray:''
    }
  },
  methods: {
    toCheck(index,sizeId) {
      this.id = index
      this.sentData.activities.SiteID=sizeId;
   
      
    },
  pitchOn(evnet){
    this.$refs.preview.src=evnet.currentTarget.src;
   console.log(evnet.currentTarget.src)
  },

    submit(){
    if(this.value==''){
      Toast({
              message: '请输入活动地点',
              position: 'middle',
              duration: 800
            })
    } else{
      this.sentData.activities.SiteName=this.value;
      console.log(this.sentData)
      sessionStorage.PublishInit=JSON.stringify(this.sentData);
     
    

        this.$router.push({ path: '/event_publish'})

    }
  }
  },

}

</script>
<style lang="stylus">

 .wrapper
    height 100vh
    body 
        background-color white
    .mint-button
        position absolute
        bottom 0
        border-radius 0
        background-color #2A96F5
        color white
        font-size 18px
        height 50px
    .mint-search
        color #ccc
        height 100%
        .mint-searchbar
            background-color rgba(0,0,0 0)
        .mint-search-list
            z-index -1
        .mint-searchbar-core
            color #ccc
            font-size 15px
            height 21px
            font-family PingFangSC-Regular
            font-weight 100
        .mintui-search
            display none
        .mint-searchbar-cancel
            color #ccc
    .mint-searchbar-cancel
      font-size 14px
    .mint-cell
      min-height 45px
      .mint-field-core
        font-size 15px
  .mint-toast
    padding 13px
    .mint-toast-text
      color #ffffff
    
</style>
<style scoped lang="stylus">
  .wrapper
    .apply_list
      background-color #ffffff
      
      .pad_b
        padding 13px 0 3px 15px
        background-color #F2F2F2
        font-size 13px
        color #666
      .headline
        border-bottom 1px solid #E5E5E5
        img 
          width: 100%;
          height: 290px;
          /* margin: 0 auto 22px; */
          display: block;
      .content
        overflow scroll     
        padding 10px 10px
        .list
          width:100%;
          display: inline;
          white-space: nowrap;
          overflow-x:scroll;
          float:left;
          overflow-y:hidden
          // height 54px
          height 80px
          .users_portrait
            margin-right 4px
            // height 54px
            // width 54px
            height: 80px;
            width: 80px;
            display:inline-block;
            border 1px solid #ccc
            &.active
              // border 1px solid orange
            img
              width 100%
              height 100%
            
</style>

